<template>
    <div>
        <!-- 标签 -->
        <div class="app-container">
        </div>
        <el-tabs v-model="activeName" :stretch="true" @tab-click="handleClick">
            <el-tab-pane label="药品销售列表" name="drug">
                <!-- 查询条件开始 -->
                <el-form ref="queryDrugFrom" :model="queryDrugParams" :inline="true" label-width="68px">
                    <el-form-item label="药品名称" prop="itemName">
                        <el-input v-model="queryDrugParams.itemName" placeholder="请输入药品名称" clearable size="small"
                                  style="width:180px" />
                    </el-form-item>
                    <el-form-item label="交易时间">
                        <el-date-picker v-model="queryDrugParams.dateRange" size="small" style="width:320px"
                                        value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期(默认今天)"
                                        end-placeholder="结束日期(默认今天)" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleDrugQuery">搜索
                        </el-button>
                        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetDrugQuery">重置
                        </el-button>
                    </el-form-item>
                </el-form>
                <!-- 查询条件结束 -->
                <!-- 数据表格开始 -->
                <el-table v-loading="loading" border :data="drugList" show-summary>
                    <el-table-column label="药品ID" prop="itemRefId" align="center" />
                    <el-table-column label="药品名称" prop="itemName" align="center" />
                    <el-table-column label="销售价格" prop="price" align="center" />
                    <el-table-column label="交易数量" prop="num" align="center" />
                    <el-table-column label="交易总价" prop="amount" align="center" />
                    <el-table-column label="创建时间" prop="createTime" align="center" />
                </el-table>
                <!-- 数据结束结束 -->

            </el-tab-pane>
            <el-tab-pane label="药品销售统计列表" name="drugStat">
                <!-- 查询条件开始 -->
                <el-form ref="queryDrugStatFrom" :model="queryDrugStatParams" :inline="true" label-width="68px">
                    <el-form-item label="药品名称" prop="drugName">
                        <el-input v-model="queryDrugStatParams.itemName" placeholder="请输入药品名称" clearable size="small"
                                  style="width:180px" />
                    </el-form-item>
                    <el-form-item label="交易时间">
                        <el-date-picker v-model="queryDrugStatParams.dateRange" size="small" style="width:320px"
                                        value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期(默认今天)"
                                        end-placeholder="结束日期(默认今天)" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleDrugStatQuery">搜索
                        </el-button>
                        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetDrugStatQuery">重置
                        </el-button>
                    </el-form-item>
                </el-form>
                <!-- 查询条件结束 -->
                <!-- 数据表格开始 -->
                <el-table v-loading="loading" border :data="drugStatList" show-summary>
                    <el-table-column label="药品ID" prop="itemRefId" align="center" />
                    <el-table-column label="药品名称" prop="itemName" align="center" />
                    <el-table-column label="销售数量" prop="sumNum" align="center" />
                    <el-table-column label="总金额" prop="sumAmount" align="center" />
                </el-table>
                <!-- 数据结束结束 -->
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    export default {
        name: "sales",
        data() {
            return {
                // 遮罩
                loading: false,
                // 被激活的tab名称
                activeName: 'drug',
                // 药品总销售数据
                drugList: [],
                // 药品的销售数量数据
                drugStatList: [],
                // 药品销售列表查询参数
                queryDrugParams: {},
                // 药品销售统计列表查询参数
                queryDrugStatParams: {}
            }
        },
        created() {
            // 默认查询销售列表
            this.listDrug()
        },
        methods: {
            // 点击tab事件
            handleClick() {
                //console.log(this.activeName)
                if (this.activeName === 'drug') {
                    this.listDrug()
                } else {
                    this.listDrugStat()
                }
            },
            // 查询药品销售列表
            listDrug() {
                this.loading = true
                this.$axios.post("statistics/api/care-order-item/queryAll", this.queryDrugParams).then(res => {
                    this.drugList = res.data.data;
                    for (let i = 0; i < this.drugList.length; i++) {
                        this.drugList[i].amount = (this.drugList[i].num) * (this.drugList[i].price)
                    }
                    this.loading = false
                }).catch(() => {
                    this.msgError('查询失败')
                    this.loading = false
                })
            },
            // 药品销售列表条件查询按钮
            handleDrugQuery() {
                this.listDrug()
            },
            // 重置药品销售列表查询
            resetDrugQuery() {
                this.queryDrugParams = {}
                this.listDrug()
            },
            // 查询药品销售统计列表
            listDrugStat() {
                this.loading = true
                this.$axios.post("statistics/api/care-order-item/querySales", this.queryDrugStatParams).then(res => {
                    this.drugStatList = res.data.data;
                    this.loading = false
                }).catch(() => {
                    this.msgError('查询失败')
                    this.loading = false
                })
            },
            // 药品销售统计列表条件查询按钮
            handleDrugStatQuery() {
                this.listDrugStat()
            },
            // 重置药品销售统计列表查询
            resetDrugStatQuery() {
                this.queryDrugStatParams = {}
                this.listDrugStat()
            }
        }
    }
</script>

<style scoped>

</style>